<template>
	<view class="">
		<view class="mask-box" @click.stop="blurAction" v-show="isActive"></view>
		<view class="footbar" :style="'bottom:'+bottom+'px'">
			<!-- 帖子输入 -->
			<view class="input-control">
				<!-- <image src="/static/input_edit.png" mode="heightFix"></image> -->
				<!-- <input type="text" :focus="isActive" @focus="isActive=true" @blur="isActive = false"
					placeholder-style="color:#c2c2c2" cursor-spacing="30" :always-embed="true" :adjust-position="true"
					:placeholder="placeholder || '说点什么吧...'" v-model="content"> -->
				<textarea v-model="content" auto-height :adjust-position="false" :show-confirm-bar="false"
					:focus="isActive" @focus="isActive=true" @blur="blurAction"
					placeholder-style="color:#c2c2c2;line-height: 48rpx;" cursor-spacing="30" :always-embed="true"
					:placeholder="inputType==='User' ? '请输入' : (placeholder || '说点什么吧...')" />
			</view>
			<view class="" v-if="!showCount || isActive">
				<van-button color="#325EB2" custom-style="width:136rpx;height: 80rpx;margin-left: 32rpx;"
					@tap="commit">{{inputType === 'User' ? '确定' :'发送'}}</van-button>
			</view>
			<view class="fx-center input-right" v-if="showCount && !isActive">
				<view class="fx-center" @click="toLiked">
					<view style="margin-left: 32rpx;">
						<image src="/static/zan1.png" mode="heightFix" v-if="liked"></image>
						<image src="/static/zan.png" mode="heightFix" v-else></image>
					</view>
					<view :class="liked?'tip-color' : ''">{{like_count>0?like_count:'点赞'}}</view>
				</view>

				<van-button open-type="share" custom-style="font-size: 30rpx;color: #5C5F66;border:none">
					<view class="fx-center">
						<image src="/static/share.png" mode="heightFix"></image>
						<view class="">{{share_count>0?share_count:'分享'}}</view>
					</view>
				</van-button>
			</view>
			<!-- 个人信息修改输入 -->
			<!-- <template v-if="inputType==='User' || inputType==='topicDetail'">
			<view class="input-control">
				<image src="/static/input_edit.png" mode="heightFix"></image>
				<textarea v-model="content" auto-height :adjust-position="false" :show-confirm-bar="false"
					:focus="isActive" @blur="blurAction" placeholder-style="color:#c2c2c2" cursor-spacing="30"
					:always-embed="true" placeholder="请输入" />
			</view>
			<view class="">
				<van-button color="#325EB2" custom-style="width:136rpx;height: 80rpx;margin-left: 32rpx;"
					@tap="otherCommit">发送</van-button>
			</view>
		</template> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "comment-input",
		props: {
			// 输入类型
			inputType: {
				type: String,
				default: 'Topic'
			},
			// 显示点赞和分享
			showCount: {
				type: Boolean,
				default: true
			},
			// 帖子id
			topicID: {
				type: Number,
				default: 0
			},
			// 点赞
			liked: {
				type: Boolean,
				default: false
			},
			// 点赞数量
			like_count: {
				type: Number,
				default: 0
			},
			// 分享数量
			share_count: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				isActive: false,
				content: '',
				placeholder: '',
				replyID: null,
				bottom: 0
			};
		},
		created() {
			this.checkHeight()
		},
		watch: {
			isActive(newData, oldData) {
				this.checkHeight()
			}
		},
		methods: {
			// 监听键盘变化
			checkHeight() {
				uni.onKeyboardHeightChange(res => {
					if (res.height > 0) {
						this.bottom = res.height - 2
					} else {
						this.bottom = 0
					}
				});
			},
			// 回复
			doReply(item) {
				this.replyID = item.id;
				this.$nextTick(() => {
					this.isActive = true;
				});
				this.placeholder = '回复作者：' + item.user.nickname;
			},
			_send(obj_id, obj_type = 'Topic', cb = null) {
				if (this.$store.state.islogin) {
					if (!this.content || !this.content.trim()) {
						this.$api.showError('表达你的态度再评论吧')
						return;
					}
					this.$api.requst('/gwc/comments', {
						content: this.content.trim(),
						obj_type: obj_type,
						obj_id: obj_id
					}, 'POST').then((res) => {
						this.$api.showError('评论成功')
						this.content = '';
						this.placeholder = '';
						if (cb) {
							cb(res);
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 点赞
			toLiked() {
				if (this.$store.state.islogin) {
					this.$api.requst('/gwc/likes', {
						action: this.liked ? 0 : 1,
						obj_type: 'Topic',
						obj_id: this.topicID
					}, 'POST').then((res) => {
						this.$emit('refrashLiked')
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 帖子提交
			commit() {
				if (this.inputType === 'User') {
					//用户数据修改
					this.$emit('submit', this.content)
				} else {
					// 帖子提交
					if (this.placeholder) {
						this._send(this.replyID, 'Comment', () => {
							this.$emit('done');
						});
					} else {
						this._send(this.topicID, 'Topic', (res) => {
							this.$emit('done', res);
						});
					}
				}

			},
			otherCommit() {
				if (this.inputType === 'User') {
					this.$emit('submit', this.content)
				} else {
					this.commit()
				}
			},
			// 设置聚焦
			setFocus() {
				this.isActive = true;
			},
			// 重置输入框
			resetContent(text) {
				this.content = text
			},

			blurAction() {
				this.isActive = false
				this.$emit('setBlur')
				setTimeout(() => {
					this.content = ''
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
	}

	.footbar {
		width: 100%;
		background: #fff;
		box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.03);
		padding: 22rpx 32rpx calc(env(safe-area-inset-bottom) / 2 + 22rpx);
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.input-control {
			display: flex;
			align-items: center;
			flex: 1;
			background: #F1F3F6;
			border-radius: 4rpx;
			min-height: 80rpx;
			box-sizing: border-box;
			padding: 10rpx;
			font-size: 30rpx;

			input,
			textarea {
				color: #333;
				flex: 1;
				padding-right: 10rpx;
				text-align: left;
			}

			textarea {
				width: 100%;
				height: 48rpx;
				line-height: 48rpx;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 8rpx;
			}
		}

		.input-right {
			font-size: 30rpx;
			color: #5C5F66;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.tip-color {
				color: #325EB2;
			}
		}
	}
</style>